<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form ref="form" :inline="true" :model="form">
      <el-row>
        <el-col :md="4" :sm="24">
          <el-form-item label="订单号：">
            <el-input v-model.trim="form.orderNum" placeholder="请输入订单号" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="24">
          <el-form-item label="时间范围：">
            <el-date-picker
              v-model="form.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :md="4" :sm="24">
          <el-form-item label="产品：">
            <el-select v-model="form.product" placeholder="请选择">
              <el-option
                v-for="item in form.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="5" :sm="24">
          <el-form-item label="用户名称：">
            <el-input v-model.trim="form.name" placeholder="请输入用户名称" />
          </el-form-item>
        </el-col>
        <el-col :md="3" :sm="24">
          <el-button type="primary">查找</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNum" label="订单号" align="center" />
      <el-table-column prop="name" label="用户名称" align="center" />
      <el-table-column prop="product" label="产品" align="center" />
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="establishTime" label="创建时间" align="center" />
      <el-table-column prop="paymentTime" label="支付时间" align="center" />
      <el-table-column prop="state" label="状态" align="center" />
      <el-table-column prop="originalPrice" label="原价" align="center" />
      <el-table-column prop="amountPayable" label="应付金额" align="center" />
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleClick(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <!-- <el-pagination
      background
      layout="prev, pager, next,sizes"
      :page-sizes="[10, 25, 50, 100]"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalNum"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination> -->
    <hsPagination @cs="aaa" />
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="isDetails">
      <div>
        <h2>订单概要</h2>
        <el-form label-position="left">
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单编号：">
                <span>{{ row.orderNum }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单类型：">
                <span>{{ row.type }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建时间：">
                <span>{{ row.establishTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付时间：">
                <span>{{ row.paymentTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="订单来源：">
            <span>{{ row.product }}</span>
          </el-form-item>
          <el-form-item label="支付状态：">
            <span>{{ row.state }} </span><span>￥{{ row.amountPayable }}</span>
          </el-form-item>
          <el-table :data="orderSummaryData" style="width: 100%">
            <el-table-column prop="channel" label="支付渠道" align="center" />
            <el-table-column prop="cost" label="扣费费用" align="center" />
            <el-table-column
              prop="deductionTime"
              label="扣款时间"
              align="center"
            />
            <el-table-column prop="serialNum" label="流水编号" align="center" />
            <el-table-column
              prop="paymentNum"
              label="支付账号"
              align="center"
            />
          </el-table>
        </el-form>
      </div>
      <div>
        <h2>订单详情</h2>
        <el-table :data="orderDetailsData" style="width: 100%">
          <el-table-column prop="product" label="产品" align="center" />
          <el-table-column prop="quantity" label="数量" align="center" />
          <el-table-column prop="configure" label="具体配置" align="center" />
          <el-table-column prop="method" label="付款方法" align="center" />
          <el-table-column
            prop="startStopTime"
            label="起止时间"
            align="center"
          />
          <el-table-column prop="money" label="金额" align="center" />
        </el-table>
      </div>
      <div class="renewBox">
        <p>到期时间变更</p>
        <p>续费前到期时间</p>
        <p>2021-09-28 12:00:00</p>
        <p>续费后到期时间</p>
        <p>2021-10-28 12:00:00</p>
      </div>
      <div class="moneyBox1">
        <div class="moneyBox2">
          <!-- <p>
            原价：<span>￥{{ row.originalPrice }}</span>
          </p>
          <p>活动优惠：<span>￥100.00</span></p>
          <p>
            应付金额：<span>￥{{ row.amountPayable }}</span>
          </p> -->
          <div class="moneyBox21">
            <div>原价：</div>
            <div>活动优惠：</div>
            <div>应付金额：</div>
          </div>
          <div class="moneyBox22">
            <div>￥{{ row.originalPrice }}</div>
            <div>￥100.00</div>
            <div>￥{{ row.amountPayable }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import hsPagination from '@/components/com/hs-pagination.vue'
export default {
  name: 'OrderList',
  components: {
    hsPagination
  },
  data () {
    return {
      form: {
        orderNum: '',
        date: '',
        name: '',
        product: 1,
        options: [
          {
            value: 1,
            label: '所有产品'
          },
          {
            value: 2,
            label: '双皮奶'
          },
          {
            value: 3,
            label: '蚵仔煎'
          },
          {
            value: 4,
            label: '龙须面'
          },
          {
            value: 5,
            label: '北京烤鸭'
          }
        ]
      },
      tableData: [
        {
          orderNum: '123456',
          name: '张三',
          product: '取色软件',
          type: '新购',
          establishTime: '2021-09-28 11:11:11',
          paymentTime: '2021-09-28 11:11:11',
          state: '已支付',
          originalPrice: '1000',
          amountPayable: '900'
        },
        {
          orderNum: '333333',
          name: '张三',
          product: '取色软件',
          type: '新购',
          establishTime: '2021-09-28 11:11:11',
          paymentTime: '2021-09-28 11:11:11',
          state: '已支付',
          originalPrice: '1000',
          amountPayable: '900'
        },
        {
          orderNum: '4444444',
          name: '张三',
          product: '取色软件',
          type: '新购',
          establishTime: '2021-09-28 11:11:11',
          paymentTime: '2021-09-28 11:11:11',
          state: '已支付',
          originalPrice: '1000',
          amountPayable: '900'
        },
        {
          orderNum: '555555',
          name: '张三',
          product: '取色软件',
          type: '新购',
          establishTime: '2021-09-28 11:11:11',
          paymentTime: '2021-09-28 11:11:11',
          state: '已支付',
          originalPrice: '1000',
          amountPayable: '900'
        }
      ],
      orderSummaryData: [
        {
          channel: '微信支付',
          cost: '￥900.00',
          deductionTime: '2021-09-28 12:00:00',
          serialNum: '1234567890',
          paymentNum: '123456789'
        }
      ],
      orderDetailsData: [
        {
          product: '取色软件',
          quantity: '1',
          configure: 'aaaabbbbcccddd',
          method: '按月',
          startStopTime: '2021-09-28 12:00:00 2021-09-28 12:00:00',
          money: '￥900.00'
        }
      ],
      row: {},
      isDetails: false
      /* currentPage: 1,
      pageSize: 10,
      totalNum: 100 */
    }
  },
  methods: {
    // 详情
    handleClick (row) {
      this.isDetails = true
      this.row = row
      console.log(row)
    },
    loadData () {
      console.log('111111111111111111')
    }
    // 分页Change
    /* currentChange (value) {
      console.log(value)
      this.currentPage = value
    },
    sizeChange (value) {
      console.log(value)
      this.pageSize = value
    } */
  }
}
</script>
<style lang="scss" scoped>
.renewBox {
  padding: 10px;
  margin: 10px 0;
  background-color: #f2f2f2;
}
.moneyBox1 {
  position: relative;
  height: 80px;
  background-color: #f2f2f2;
  .moneyBox2 {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    .moneyBox21 {
      width: 200px;
      position: absolute;
      right: 80px;
      text-align: right;
      div {
        margin-bottom: 5px;
      }
    }
    .moneyBox22 {
      div {
        margin-bottom: 5px;
      }
    }
  }
}
::v-deep .el-form-item.el-form-item--medium {
  margin-bottom: 0;
}
</style>
